<template>
  <view class="u-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="供应链商品" fixed :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
    right-icon="search" @clickRight="onClickRight"></uni-nav-bar>
    <view class="u-tab">
      <view class="item" :class="tabIndex === 0 ? 'active' : ''" @click="() => tabIndex = 0">
        标品商品
      </view>
      <view class="item" :class="tabIndex === 1 ? 'active' : ''" @click="() => tabIndex = 1">
        非标商品
      </view>
    </view>
    <view class="u-menu-wrap" v-if="tabIndex === 0">
      <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view">
        <view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
          :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
          <text class="u-line-1">{{ item.name }}</text>
        </view>
      </scroll-view>
      <!-- <image class="item-menu-image" :src="item1.icon" mode=""></image> -->
      <scroll-view scroll-y scroll-with-animation class="right-box">
        <view class="page-view">
          <view class="class-item" :id="'item' + index" v-for="(item, index) in tabbarTwo" :key="item.id">
            <view class="item-title">
              <text>{{ item.name }}</text>
            </view>
            <view class="item-container">
              <view class="thumb-box" v-for="(item1, index1) in item.children" :key="item1.id"
                @click.stop="$navTo('/pages/goodsCategory/ThreeCategory', { categoryId3: item1.id, categoryId1: tabbar[current].id, categoryId2: item.id })">
                <view class="item-menu-name u-ellipsis">{{ item1.name }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="content" v-else>
      <!-- <view class="topSearchBox">
		    <input class="uni-input" v-model="keyword" confirm-type="search" placeholder="搜索" />
		  </view> -->
      <scroll-view class="scroll-view_H" scroll-y style="height:calc(100%)" enhanced show-scrollbar="false"
        @refresherrefresh="refresherrefreshFn" :refresher-triggered="triggered" refresher-enabled="true">
        <view class="main">
          <view class="categorybox">
            <scroll-view class="scroll-view_H" scroll-y style="height: 100%;" enhanced show-scrollbar="false">
              <view class="itemclas u-ellipsis" @click="changCategory('')" :class="{ active: !activeId }">全部
              </view>
              <view :id="key" v-for="(val, key) in categoryList" :key="key" class="itemclas u-ellipsis"
                @click="changCategory(key)" :class="{ active: key == activeId }">{{ val }}</view>
            </scroll-view>
          </view>
          <view class="goodsbox" style="flex:1;">
            <scroll-view class="scroll-view_H" style="height: 100%;" scroll-y show-scrollbar="false"
              @scrolltolower="lower">
              <view class="goodCard" v-for="item in goodsList" :key="item.id">
                <image :src="item.imgUrl ? item.imgUrl : '/static/index/noneImg.png'" mode="aspectFill" class="goodsImg">
                </image>
                <view class="goodInfo">
                  <view class="goodsname u-ellipsis">{{ item.name }}</view>
                  <view class="sub_title">进价：{{ item.outboundPrice }}元</view>
                  <view class="flexBox">
                    <text class="txt">配送规格：{{ item.deliveryNorms }}KG</text>
                  </view>
                  <view class="flexBox">
                    <text class="txt" v-if="item.status == '0'">状态：正常</text>
                    <text class="txt" v-if="item.status == '1'">状态：停用</text>
                    <text class="txt" v-if="item.status == '2'">状态：淘汰</text>
                    <view class="btnBox" @click="addPointPurchase(item.id)" v-if="item.status == '0'">点采</view>
                  </view>
                </view>
              </view>
              <uni-load-more :status="loading"></uni-load-more>
            </scroll-view>
          </view>
        </view>
      </scroll-view>
      <cls-DragBtn is-dock :bottom-px="250" @btnClick="dianCaiclick">
        <view class="floatBox btn type-1">点采</view>
      </cls-DragBtn>
    </view>
  </view>
</template>
<script>
import { reqCategoryTree } from '@/apis/goods';
import { getDictValueAndNameSource, reqGoodsList, reqAddPointPurchase } from '@/apis/member.js'
export default {
  name: "GoodsCategory",
  data() {
    return {
      current: 0, // 预设当前项的值
      tabbar: [],
      tabbarTwo: [],
      categoryList: {},
      keyword: '',
      activeId: '',
      goodsList: [],
      page: {
        pageNum: 1,
        pageSize: 15
      },
      tabIndex: 0,
      loading: 'loading', // 是否触发上拉加载
      triggered: false
    }
  },
  onLoad(params) {
    this.tabIndex = +params?.type;
    this.getCategoryList()
  },
  onReady() {
    this.getCategoryTree();
  },
  methods: {
    async getCategoryTree() {
      let res = await reqCategoryTree();
      if (res.code === 200) {
        this.tabbar = res.data.categoryList;
        this.tabbarTwo = res.data.categoryList[0]?.children;
      }
    },
    swichMenu(index) {
      this.current = index;
      this.tabbarTwo = this.tabbar[index]?.children;
    },
    scroll() {

    },
    changCategory(id) {
      this.activeId = id
      this.goodsList = []
      this.page.pageNum = 1
      this.loading = "loading";
      this.reqGoodsList()
    },
    async getCategoryList() {
      const res = await getDictValueAndNameSource('NONSTANDARD_CATEGORY');
      this.categoryList = res.data;
      console.log(this.categoryList, 'this.categoryList');
      // this.activeId = '0'
      this.page.pageNum = 1
      this.reqGoodsList()
    },
    async reqGoodsList() {
      const res = await reqGoodsList({ ...this.page, category: this.activeId })
      if (res.code == 200) {
        this.goodsList = [...this.goodsList, ...res.data.list]
        console.log('商品列表', res.data);
        this.triggered = false
        if (res.data.isLastPage) {
          this.loading = "noMore"
        }
      }
    },
    refresherrefreshFn() {
      this.categoryList = []
      this.goodsList = []
      this.page = {
        pageNum: 1,
        pageSize: 15
      }
      // this.activeId = ''
      this.triggered = true
      this.getCategoryList()
    },
    lower() {
      if (this.loading == "noMore") {
        return;
      }
      this.page.pageNum++;
      this.loading = "loading";
      this.reqGoodsList();
    },
    dianCaiclick() {
      // 跳转页面
      this.$navTo('/pages/procure/noWaitSubmit')
    },
    async addPointPurchase(id) {
      const res = await reqAddPointPurchase({ commodityId: id })
      if (res.code == 200) {
        uni.showToast({
          title: '添加点采成功',
          icon: 'none'
        })
      }
    },
    onClickRight() {
      console.log('111', this.tabIndex);
      if (this.tabIndex == '1') {
        this.$navTo('/pages/goodsCategory/searchnoGoods')
      } else {
        this.$navTo('/pages/goodsCategory/searchGoods')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// view {
//   box-sizing: border-box;
// }

.u-wrap {
  height: calc(100vh);
  // overflow: hidden;
  box-sizing: border-box;
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
}

.u-tab {
  height: 84rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .item {
    padding: 12rpx 0;
    font-size: $uni-font-size-base;
    font-weight: 400;
    line-height: 60rpx;
    height: 60rpx;

    &.active {
      color: $uni-main-bgColor;
      font-weight: 600;
      border-bottom: 2px solid $uni-main-bgColor;
    }
  }
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;

  .u-tab-view {
    width: 240rpx;
    height: 100%;
  }

  .u-tab-item {
    height: 110rpx;
    background: #f6f6f6;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $uni-font-size-small;
    color: #444;
    font-weight: 400;
    line-height: 1;
  }

  .u-tab-item-active {
    position: relative;
    color: $uni-main-bgColor;
    font-size: $uni-font-size-base;
    // font-weight: 600;
    background: #fff;
  }

  .u-tab-item-active::before {
    content: "";
    position: absolute;
    border-left: 4px solid $uni-main-bgColor;
    height: 100%;
    left: 0;
    top: 0;
  }

  .u-tab-view {
    height: 100%;
  }
}

.right-box {
  background-color: rgb(250, 250, 250);

  .page-view {
    padding: 16rpx;
  }

  .class-item {
    margin-bottom: 30rpx;
    background-color: #fff;
    padding: 16rpx;
    border-radius: 8rpx;
  }

  .class-item:last-child {
    min-height: calc(100% - 150rpx);
    /* #ifdef H5 */
    min-height: calc(100% - var(--window-top) - 150rpx);
    /* #endif */
    margin-bottom: 0;
  }

  .item-title {
    font-size: $uni-font-size-base;
    color: #303133;
    font-weight: bold;
  }

  .item-menu-name {
    width: 100%;
    font-weight: normal;
    font-size: $uni-font-size-small;
    color: #303133;
  }

  .item-container {
    display: flex;
    flex-wrap: wrap;
  }

  .thumb-box {
    width: 33.333333%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 40rpx;
  }

  .item-menu-image {
    width: 120rpx;
    height: 120rpx;
  }
}



.topSearchBox {
  height: 60rpx;
  width: 100%;
  display: flex;
  font-size: 24rpx;
  align-items: center;
  padding: 10rpx 30rpx;
  line-height: 40rpx;
  margin-bottom: 16rpx;

  .uni-input {
    flex: 1;
    height: 50rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    margin-left: 20rpx;
    background-color: #eaeaea;
    border-radius: 30rpx;
    border: 1px solid #ccc;
  }
}

.content {
  // flex: 1;
  // height: calc(100%);
  height: 100%;
  overflow: hidden;
  // display: flex;
  // flex-direction: column;

  // height: calc(100vh - var(--window-top) - 84rpx);
  view {
    box-sizing: border-box;
  }
}

.main {
  display: flex;
  width: 100%;
  height: 100%;
  // height: 500rpx;
  // height: calc(100% - var(--window-top));
  // flex: 1;
}

.categorybox {
  height: 100%;
  width: 180rpx;
  overflow: hidden;
  color: #444;
  background-color: #f6f6f6;
  font-size: $uni-font-size-small;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
  // height: 100%;

  .itemclas {
    padding: 10rpx 10rpx;
    height: 80rpx;
    text-align: center;
    line-height: 50rpx;
    border-left: 4px solid #f6f6f6;
  }

  .active {
    background-color: #fff;
    border-left: 4px solid $uni-main-bgColor;
    font-weight: 600;
    color: $uni-main-bgColor;
    font-size: $uni-font-size-base;
  }
}

.goodsbox {
  font-size: $uni-font-size-small;
  line-height: 36rpx;

  .goodCard {
    padding: 20rpx;
    box-sizing: border-box;
    padding-left: 20rpx;

    background-color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;

    .goodsImg {
      width: 200rpx;
      height: 200rpx;
      margin-right: 20rpx;
      border: 1px solid #eee;
      background-color: #f7f7f7;
    }

    .goodInfo {
      height: 200rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      // justify-content: space-evenly;
      justify-content: space-between;
    }

    .goodsname {
      font-weight: 600;
      width: 300rpx;
      font-size: $uni-font-size-upBase;
      margin-bottom: 10rpx;
    }

    .sub_title {
      font-size: $uni-font-size-mini;
    }

    .flexBox {
      display: flex;
      justify-content: space-between;
      font-size: $uni-font-size-mini;
      // flex: 1;
      line-height: 60rpx;
      width: 100%;
    }

    .btnBox {
      width: 100rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 10rpx;
      background-color: $uni-main-bgColor;
      text-align: center;
      color: #fff;
    }
  }
}

.floatBox {
  // position: fixed;
  // bottom: 150rpx;
  // right: 50rpx;
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx !important;
  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .3);
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  padding: 10rpx;
  box-sizing: border-box;
}
</style>